<template>
  <el-dialog :title="titleText" :visible.sync="showDialog" top="0" :close-on-click-modal="false" @close="cancel">
    <el-form ref="form" label-position="left" :model="formData" :rules="rules" class="el-form">
      <el-form-item label="产品：" prop="materialNo" class="w100p">
        <el-select v-model="formData.materialNo" filterable clearable placeholder="请选择产品">
          <el-option v-for="item in prodList" :key="item.materialNo" :label="item.materialName" :value="item.materialNo" />
        </el-select>
      </el-form-item>
      <el-form-item label="关联附属品：" prop="relatedAccessoryList" class="w100p">
        <el-select v-model="formData.relatedAccessoryList" filterable clearable multiple placeholder="请选择关联附属品">
          <el-option v-for="item in prodList" :key="item.materialNo" :label="item.materialName" :value="item.materialNo" />
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button class="cancelbtn" @click="cancel()">取 消</el-button>
      <el-button :loading="saveLoading" type="primary" class="savebtn" @click="save()">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import api from '@/api/processing-management/basic-info-manage/product-process';
export default {
  name: 'AddEditDialog',
  components: {},
  props: {
    value: Boolean,
    selectedItem: {
      type: Object,
      default: null
    },
    prodList: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      formDataDefault: {
        materialNo: '',
        relatedAccessoryList: []
      },
      formData: {},
      saveLoading: false,
      showDialog: false,
      rules: {
        materialNo: [
          {
            required: true,
            message: '请选择产品',
            trigger: ['blur', 'change']
          }
        ],
        relatedAccessoryList: [
          {
            required: true,
            message: '请选择关联附属品',
            trigger: ['blur', 'change']
          }
        ]
      }
    };
  },
  computed: {
    titleText() {
      return this.selectedItem ? '编辑产品' : '新增产品';
    }
  },
  watch: {
    value(v) {
      this.showDialog = v;
      if (v) {
        this.init();
      }
    }
  },
  created() {
    this.reset();
  },
  mounted() {},
  methods: {
    reset() {
      this.formData = JSON.parse(JSON.stringify(this.formDataDefault));
    },
    init() {
      const { selectedItem } = this;
      if (selectedItem) {
        const { materialNo, relatedAccessoryList } = selectedItem;
        this.formData.materialNo = materialNo;
        this.formData.relatedAccessoryList = relatedAccessoryList;
      }
    },
    save() {
      const { formData, selectedItem } = this;
      this.$refs['form'].validate(async valid => {
        if (valid) {
          this.saveLoading = true;
          if (selectedItem) {
            const paylod = { ...selectedItem, ...formData };
            api
              .editProduct(paylod)
              .then(res => {
                if (res.code === 1) {
                  this.$message.success(res.msg);
                  this.close();
                  this.$emit('reflash');
                }
              })
              .finally(_ => {
                this.saveLoading = false;
              });
          } else {
            api
              .addProduct(formData)
              .then(res => {
                if (res.code === 1) {
                  this.$message.success(res.msg);
                  this.close();
                  this.$emit('reflash');
                }
              })
              .finally(_ => {
                this.saveLoading = false;
              });
          }
        }
      });
    },
    close() {
      setTimeout(() => {
        this.reset();
        this.$refs['form'].resetFields();
      }, 250);
      this.$emit('input', false);
    },
    cancel() {
      setTimeout(() => {
        this.reset();
        this.$refs['form'].resetFields();
      }, 250);
      this.$emit('input', false);
    }
  }
};
</script>

<style lang="scss" scoped></style>
